<template>
  <div>
    <h3>我是Home组件</h3>
    <!-- 编程式导航（js跳转） -->
    <button @click="$router.go(-1)">后退一页</button>
    <button @click="$router.push('/movie/3/长静湖')">跳转到那里去</button>
    <button @click="aa">看长津湖</button>
    <button @click="bb">查看歌手</button>
  </div>
</template>

<script>
export default {
  methods: {
    aa() {
      //字符串写法
      //this.$router.push("/movie/2/长津湖");

      //对象写法--使用path（有问题，参数传递不过去）
      // this.$router.push({
      //   path: "/movie",
      //   params: {
      //     id: 2,
      //     name: "长津湖",
      //   },
      // });

      //对象写法--使用name可以传递参数
      this.$router.push({
        name: "movie",
        params: {
          id: 2,
          name: "长津湖",
        },
      });
    },
    bb() {
      this.$router.push("/music?id=8&name=张惠妹");
    },
  },
};
</script>

<style scoped>
div {
  height: 100px;
  background-color: beige;
}
</style>